<template>
    <div style="padding:0 20px 0 0">
        <el-form ref="addData" :model="addData" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="terms">
                <el-input v-model="addData.terms" placeholder="限制10个字数" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="addData.remark" type="textarea" :rows="4" maxlength="200" placeholder="限制200个字以内"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认</el-button>
                <el-button type="warning" @click="quXiao">取消</el-button>
                <el-button type="success" @click="dialogVisible = true">批量导入</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
            title="导入敏感词"
            :visible.sync="dialogVisible"
            width="40%">
            <div>
              <el-upload
                  :action="importFileUrl"
                  name="importfile"
                  :file-list="fileList"
                  :headers="token" 
                  :onError="uploadError"
                  :onSuccess="uploadSuccess"
                  :on-remove="uploadRemove"
                  :beforeUpload="beforeAvatarUpload"
                  >
                  <el-button size="small" type="primary">选择文件</el-button>
              </el-upload>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="back">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  data() {
    return {
      dialogVisible: false,
      addData: {
        terms: "",
        remark: ""
      },
      rules: {
        terms: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "最大字数为10个字", trigger: "blur" }
        ]
      },
      importFileUrl: "",
      fileList: [],
      token: {}
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      //http://127.0.0.1:9886/api/SensitiveWords/ImportSensitiveWords
      this.importFileUrl = localStorage.getItem("baseURL") + "/api/SensitiveWords/ImportSensitiveWords";
      this.token = { Authorization: getToken() };

    },
    //上传成功
    uploadSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.$message({
          message: response.msg,
          type: "success"
        });
      } else {
        this.$message({
          message: response.msg,
          type: "warning"
        });
      }
    },
    // 上传错误
    uploadError(response, file, fileList) {
      this.$message({
        message: "上传失败  请重试",
        type: "warning"
      });
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      return true;
    },
    uploadRemove(file, fileList) {
      this.addData.Icon = "";
    },
    //取消导入
    quXiao() {
      this.addData.terms = "";
      this.addData.remark = "";
    },
    //确定导入
    onSubmit() {
      this.$api.post("/api/SensitiveWords/AddOrUpdateSensitiveWords",this.addData,true).then(res=>{
        if (res.statusCode == 200) {
          this.quXiao();
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }         
      })

    },
    back() {
      this.dialogVisible = false;
      this.fileList = []
    }
  }
};
</script>

<style scoped>
</style>